[V0_FILE]typescriptreact:file="tailwind.config.js" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "#7FD4CF", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "#FBDD97", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescript:file="app/page.tsx" isEdit="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Checkbox } from "@/components/ui/checkbox" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { CreditCard, AlertCircle, CheckCircle2 } from "lucide-react" import Image from "next/image" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" export default function CryptoVending() { const [currentStep, setCurrentStep] = useState(1) const [amount, setAmount] = useState(100) const [phoneNumber, setPhoneNumber] = useState("") const [phonePrefix, setPhonePrefix] = useState("+1") const [termsAgreed, setTermsAgreed] = useState(false) const [showErrorModal, setShowErrorModal] = useState(false) const [errorMessage, setErrorMessage] = useState("") const [showProcessingModal, setShowProcessingModal] = useState(false) const [processingMessage, setProcessingMessage] = useState("") const [transactionId, setTransactionId] = useState("") const [selectedCurrency, setSelectedCurrency] = useState("USDT") const [selectedChain, setSelectedChain] = useState("TON") const [userWalletAddress, setUserWalletAddress] = useState("") // Calculate fee and amounts const fee = amount * 0.05 const receiveAmount = amount - fee const goToStep = (step: number) => { setCurrentStep(step) } const handleContinueToPayment = () => { if (amount < 10) { setErrorMessage("Please enter a valid amount (minimum $10)") setShowErrorModal(true) return } goToStep(2) } const handleContinueToContact = () => { goToStep(3) } const handleContinueToVerification = () => { if (!phoneNumber) { setErrorMessage("Please enter your phone number") setShowErrorModal(true) return } if (!termsAgreed) { setErrorMessage("Please agree to the Terms of Service and Privacy Policy") setShowErrorModal(true) return } goToStep(4) // Automatically proceed to wallet connection step after a delay setTimeout(() => { goToStep(5) }, 3000) } const handlePayment = (method: string) => { setProcessingMessage(`Processing ${method} payment...`) setShowProcessingModal(true) // Simulate payment processing setTimeout(() => { setShowProcessingModal(false) goToStep(3) }, 2000) } const handleNewTransaction = () => { setAmount(100) setPhoneNumber("") setTermsAgreed(false) setTransactionId("") setSelectedCurrency("USDT") setSelectedChain("TON") setUserWalletAddress("") goToStep(1) } const simulateCryptoTransfer = () => { setProcessingMessage( `Sending ${receiveAmount} ${selectedCurrency} on ${selectedChain} chain to ${userWalletAddress}...`, ) setShowProcessingModal(true) // Simulate crypto transfer setTimeout(() => { setShowProcessingModal(false) setTransactionId( selectedChain === "TON" ? "0x" + Math.random().toString(16).substring(2, 10) + "..." : Math.random().toString(36).substring(2, 15) + "...", ) goToStep(6) }, 3000) } const handleConnectWallet = async () => { // Simulate wallet connection setUserWalletAddress( selectedChain === "TON" ? "0x" + Math.random().toString(16).substr(2, 40) : Math.random().toString(36).substring(2, 15) + ".sol", ) simulateCryptoTransfer() } return (

{/* Grid background pattern */}

{/* Header */}

EC✧TOYS

Crypto Meets Collectibles

{/* Step Indicator */}

{[1, 2, 3, 4, 5, 6].map((step) => (

step ? "bg-[#7FD4CF] text-white border-2 border-white" : "bg-gray-200 text-gray-500" }`} > {step}

{step < 6 && (

step ? "bg-[#7FD4CF] border border-white" : "bg-gray-200"}`} >

)}

))}

= 1 ? "font-medium" : "opacity-70"}>Amount = 2 ? "font-medium" : "opacity-70"}>Payment = 3 ? "font-medium" : "opacity-70"}>Contact = 4 ? "font-medium" : "opacity-70"}>Verify = 5 ? "font-medium" : "opacity-70"}>Wallet = 6 ? "font-medium" : "opacity-70"}>Complete

{/* Step 1: Amount Selection and Currency/Chain Selection */} {currentStep === 1 && (

💰 Select Amount, Currency, and Chain

Choose how much you would like to purchase:

Amount (USD) setAmount(Number(e.target.value))} className="text-lg" />

Select Currency

USDT

USDC

Select Chain

TON

Solana

Amount: ${amount.toFixed(2)}

Fee (5%): ${fee.toFixed(2)}

You receive: {receiveAmount.toFixed(2)} {selectedCurrency}

Chain: {selectedChain}

ℹ️ Our transaction fee is 5%, lower than industry standard.

)} {/* Step 2: Payment Method */} {currentStep === 2 && (

💳 Payment Method

Select how you would like to pay:

)} {/* Step 3: Contact Information */} {currentStep === 3 && (

📱 Contact Information

Please provide your mobile number to receive transaction receipt:

Country Code

Phone Number setPhoneNumber(e.target.value)} className="text-lg" />

setTermsAgreed(checked as boolean)} className="mt-1" /> I agree to the{" "} Terms of Service {" "} and{" "} Privacy Policy

)} {/* Step 4: KYC Verification */} {currentStep === 4 && (

🔐 Identity Verification

For regulatory compliance, we need to verify your identity. This process only takes a minute.

Verification powered by Veriff

Verification in progress. Please wait...

)} {/* Step 5: Wallet Connection */} {currentStep === 5 && (

🔗 Connect Your Wallet

Connect your {selectedChain} wallet to receive your {selectedCurrency}:

)} {/* Step 6: Transaction Complete */} {currentStep === 6 && (

✅ Transaction Complete

You have successfully purchased {receiveAmount.toFixed(2)} {selectedCurrency} for ${amount.toFixed(2)}.

The {selectedCurrency} has been sent to your wallet on the {selectedChain} chain.

Your Wallet Address:

Transaction ID:

A receipt has been sent to your phone number.

🛍️ Check out our toy collection on the left side of the machine!

)}

{/* Error Modal */} {showErrorModal && (

Error

{errorMessage}

)} {/* Processing Modal */} {showProcessingModal && (

Processing

{processingMessage}

)}

) }

About

Tags

Share

About

Tags

Share

More Templates Like This